<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <!-- react核心组件库 -->
  <script src="../其他/js/react.development.js"></script>
  <script src="../其他/js/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="../其他/js/babel.min.js"></script>
  <script type="text/babel">
    /*
        1.初始化阶段：由ReactDoM.render（）触发---初次渲染
              1.constructor（）
              2.componentWillMount（）
              3.render（）
              4.componentDidMount（）  ===========> 常用   一般用在初始化时
        2.更新阶段：由组件内部this.setState（）或父组件重新render触发
              1.shouidComponentUpdate（）
              2.componentwillUpdate（）
              3.render（） ==============>最常用
              4.componentDidUpdate（）
        3.卸载组件：由ReactDoM.unmountComponentAtNode（）触发
              1.componentWillUnmount（） =====================>常用
    */

  class A extends React.Component {
    state = { car: '奔驰'}
    changeCar = () => {
      this.setState({car: '奥迪'})
    }
    render() {
      return (
        <div>
          <h2>我是A组件,我的座驾是: {this.state.car}</h2>
          <button onClick={this.changeCar}>我要换车</button>
          <B carName={this.state.car}/>
        </div>
      )
    }
  }
  class B extends React.Component {
    // 子组件将要接收父组件新的 prop 属性时触发,第一次接收不触发
    componentWillReceiveProps() {
      console.log(this.props);
      console.log('-----componentWillRecieveProps');
    }
    render() {
      return (
        <div>
          <h1>我是B组件,我的车是{this.props.carName}</h1>
        </div>
      )
    }
  }
  ReactDOM.render(<A/>, document.getElementById('root'))

  </script>
</body>
</html>